<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Text",
  inject: ["getNode"],
  data() {
    return {
      height: 64,
      width: 64,
      text: "说明文本"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    // this.text = node.getAttrs().text?.text;

    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>
<template>
  <div class="c-text" :style="nodeStyle">
    <div class="c-text__content">{{ text }}</div>
  </div>
</template>
<style scoped lang="scss">
.c-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
